<template>
  <div class="bluetitle">
    <div class="label">
      {{ title }}
    </div>
    <div class="number">{{ number }}</div>
    <div class="unit">{{ unit }}</div>
  </div>
</template>
<script setup>
defineProps({
  title: String,
  number: [String, Number],
  unit: String
})
</script>
<style scoped lang="scss">
.bluetitle {
  width: 350px;
  height: 43px;
  background: url('@/assets/images/global/bluetitle.png') no-repeat;
  background-size: 320px 43px;
  box-sizing: border-box;
  padding-left: 50px;
  display: flex;

  .label {
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-style: italic;
    color: #ffffff;
    transform: translateY(-2px);
  }
  .number {
    font-size: 35px;
    font-family: pmzd;
    font-weight: 400;
    color: #ffd800;
    margin: 0 7px 0px 20px;
    transform: translateY(-8px);
  }
  .unit {
    font-size: 15px;
    color: #ffffff;
    margin-bottom: 20px;
    transform: translateY(5px);
  }
}
</style>
